<!-- 歌单广场 -->
<template>
	<view>
		<scroll-view scroll-x class="label" enable-flex :scroll-into-view="nid" scroll-with-animation v-if="!name">
			<view @click="setLabel('label'+item.id,item.name)" class="label-item"
				v-for="(item,index) in PlaylistHotLabel" :key="item.id" :id="'label'+item.id">
				<view :class="{'click':nid==='label'+item.id}">
					<text>{{item.name}}</text>
				</view>
			</view>
		</scroll-view>
		<image @click="tosong_label" v-if="!name" class="menu" src="../../static/song_sheet/菜单.png"></image>

		<view class="body">
			<view class="item" v-for="(item,index) in Playlist" :key="item.id" @click="toSongSheetInfo(item.id)">
				<view class="item-content">
					<image :src="item.coverImgUrl"></image>
					<view class="number">
						<text>{{playCount[index]}}</text>
					</view>
				</view>
				<view class="item-title">
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapActions,
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				nid: '', // 当前所在的标签id
				name: '', // 当前所在的歌单分类名称，只有查看全部歌单标签跳转回来时有
			};
		},
		methods: {
			...mapActions('song_sheet', ['GetPlaylistHotLabel', 'GetPlaylist']),
			...mapMutations('song_sheet',['setPlaylist']),

			// 点击标签回调
			setLabel(nid, name) {
				this.nid = nid
				this.GetPlaylist(name)
			},

			// 跳转到歌单详情页
			toSongSheetInfo(id) {
				uni.navigateTo({
					url: `/pages/SongSheetInfo/index?id=${id}`
				})
			},
			
			// 跳转到全部歌单标签页面
			tosong_label(){
				uni.navigateTo({
					url:'/pages/song_label/song_label'
				})
			}
		},
		computed: {
			...mapState('song_sheet', ['PlaylistHotLabel', 'Playlist']),

			// 歌单的播放量
			playCount() {
				let playCountList = []
				for (var i = 0; i < this.Playlist.length; i++) {
					let item = this.Playlist[i]
					let playCount = item.playCount.toString()
					if (playCount.length > 8) {
						playCount = playCount.slice(0, -8) + '亿'
						playCountList.push(playCount)
						continue
					}
					if (playCount.length >= 6) {
						playCount = playCount.slice(0, -4) + '万'
						playCountList.push(playCount)
						continue
					}
					playCountList.push(playCount)
				}
				return playCountList
			}
		},
		onLoad(data) {
			let name = data['name']
			if (name) {
				this.GetPlaylist(name)
				uni.setNavigationBarTitle({
					title: name
				})
				this.name = name
			} else {
				this.GetPlaylistHotLabel().then(value => {
					let item = value[0]
					this.nid = 'label' + item.id
					this.GetPlaylist(item.name)
				})
			}
		},
		onUnload() {
			this.setPlaylist([])
		}
	}
</script>

<style lang="scss">
	.label {
		display: flex;
		white-space: nowrap;
		height: 50rpx;
		width: 90%;

		.label-item {
			display: flex;
			justify-content: center;
			height: 100%;
			margin-right: 30rpx;

			text {
				font-size: 28rpx;
				opacity: 0.6;
			}
		}

		.click {
			border-bottom: 6rpx #de2e25 solid;
		}
	}

	.menu {
		width: 30rpx;
		height: 30rpx;
		position: fixed;
		right: 30rpx;
		top: 30rpx;
	}

	.body {
		width: 100%;
		margin-top: 30rpx;
		display: flex;
		flex-wrap: wrap;

		.item {
			width: 30%;
			margin-right: 20rpx;
			margin-bottom: 20rpx;

			.item-content {
				position: relative;
				height: 200rpx;
				display: flex;
				justify-content: flex-end;

				&>image {
					z-index: 1;
					position: absolute;
					height: 100%;
					width: 100%;
					border-radius: 30rpx;
				}

				.number {
					background-color: #727771;
					height: 30rpx;
					width: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 30rpx;
					position: relative;
					z-index: 2;
					margin-right: 20rpx;
					margin-top: 20rpx;

					text {
						font-size: 18rpx;
						opacity: 0.8;
					}
				}
			}

			.item-title {
				text {
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2; // 表示需要显示的行数
					-webkit-box-orient: vertical; //子代元素垂直显示
					font-size: 28rpx;
					opacity: 0.8;
				}

			}
		}
	}
</style>
